<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="位置" prop="node">
        <el-select v-model="queryParams.node" placeholder="请选择" @change="getListType">
          <el-option
            v-for="item in optionsArea"
            :key="item.id"
            :label="item.areaName"
            :value="item.id">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="设备类型" prop="equipmentType">
        <el-select v-model="queryParams.equipmentType" placeholder="请选择" @change="getListGroup">
          <el-option
            v-for="item in optionsType"
            :key="item.id"
            :label="item.typeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="dept">
        <el-select v-model="queryParams.dept" placeholder="请选择" @change="getList" >
          <el-option
            v-for="item in optionsGroup"
            :key="item.id"
            :label="item.equipmentGroupName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="startDate">
          <el-date-picker
            clearable
            v-model="queryParams.startDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="请选择时间">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="endDate">
          <el-date-picker
            clearable
            v-model="queryParams.endDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="请选择时间">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--父div 样式 : display: flex;flex-wrap:wrap ,控制横向排序,超出换行-->
    <!--父div 样式 : height: 220px;overflow:auto ,控制超出父div高度出现滚动条-->
    <div style="display: flex;flex-wrap:wrap" >
      <!--子div需要有固定的高和宽,这样多个子div横向排列,超出父div宽度后,自动换行-->
      <div  style="width: 600px;height:600px" v-for="(items, indexs) in equipmentList" :key="indexs">
        <h3 class="title">{{equipmentName[indexs]}}</h3>
        <div  style="width:600px; height:500px;" v-bind:id="'main'+items"></div>
      </div>
    </div>





  </div>
</template>

<script>
import { histroyList} from "@/api/iot/equipment";
import { listTypeByArea} from "@/api/iot/type";
import { listAreaAll} from "@/api/iot/area";
import { listGroupAll} from "@/api/iot/group";
import echarts from "echarts";
import {parseTime} from "../../utils/ruoyi";

export default {
  name: "totalData",
  data() {
    return {
      // 遮罩层
      loading: true,
      myChart: null,
      option: null,
      dataListAll: [],
      dataListAllS: [],
      dataListAllE: [],
      dataListAllL: [],
      dataListAllN: [],
      areaId: 1,
      eData:[],
      mqttData:[],
      optionsArea:[],
      optionsType:[],
      optionsGroup:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      equipmentList: [],
      equipmentName: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        endDate:null,
        startDate:null,
        name: null,
        equipmentType: null,
        describe: null,
        dept: null,
        address: null,
        gateway: null,
        status: null,
        node: null,
        analog: null,
        offset: null
      }
    };
  },

  created() {
    // this.getList();
    this.getListArea();
    // this.setData();
  },
  methods: {

    showEcharts(id){
      const chartDom = document.getElementById('main'+id);

      this.myChart = echarts.init(chartDom);
      this.myChart.resize();
      this.option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top:0,
          data: this.dataListAllL
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dataListAllN
        },
        yAxis: {
          type: 'value'
        },
        series:this.dataListAll
      };
      this.myChart.setOption(this.option);

    },

    getListData() {
      this.loading = true;
      histroyList(this.queryParams).then(response => {
        // this.equipmentList = response.id;
        this.dataListAllN=[]
        this.dataListAllS=[]
        this.dataListAllE=[]
        this.dataListAllL =[this.queryParams.startDate, this.queryParams.endDate];

        for (let i = 0; i <this.equipmentList.length ; i++) {
          const dataTs=response['s'+this.equipmentList[i]];
          const dataTe=response['e'+this.equipmentList[i]];
          console.log(this.equipmentList)
          for (let j = 0; j < dataTs.length; j++) {
            this.dataListAllN.push(this.parseTime(dataTs[j].timestamp,'{y}-{m}-{d} {h}:{i}:{s}'))
            this.dataListAllS.push(dataTs[j].fields[0].stringValue)
            this.dataListAllE.push(dataTe[j].fields[0].stringValue)
          }
          this.dataListAll=[
            {
              name: this.queryParams.startDate,
              type: 'line',
              stack: 'Total',
              data: this.dataListAllS
            },
            {
              name: this.queryParams.endDate,
              type: 'line',
              stack: 'Total',
              data: this.dataListAllE
            }
          ];
          console.log(this.equipmentList[i])
          this.showEcharts(this.equipmentList[i])
        }
        // let ppl={ name:data[0].list[j].n, type: 'line', stack: 'Total',  data: newdataAll};
        // this.dataListAll.push(ppl);
        this.loading = false;

      });
    },
    /** 查询设备管理列表 */
    getList() {
      this.loading = true;
      histroyList(this.queryParams).then(response => {
        console.log(response)
        this.equipmentList = response.id;
        this.equipmentName = response.name;
        this.loading = false;

      });
    },
    /** 查询区域列表 */
    getListArea() {
      this.loading = true;
      listAreaAll(this.queryParams).then(response => {
        this.optionsArea = response.rows;
        this.loading = false;

      });
    },
    /** 查询区域列表 */
    getListType(areaId) {
      this.areaId=areaId;
      this.optionsType =[];
      this.loading = true;
      listTypeByArea(areaId).then(response => {
        this.optionsType = response.rows;
        this.loading = false;

      });
    },
    /** 查询区域列表 */
    getListGroup(typeId) {
      this.loading = true;
      this.optionsGroup=[];
      listGroupAll(typeId,this.areaId).then(response => {
        this.optionsGroup = response.rows;
        this.loading = false;

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getListData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }



  }
};
</script>
